<template>
  <el-skeleton :loading="loading" animated>
    <template #template>
      <el-card>
        <el-skeleton-item variant="h3" style="width: 50%" />
        <div class="margin-top">
          <el-skeleton-item variant="text" />
          <el-skeleton-item variant="text" style="width: 50%" class="margin-top" />
          <el-skeleton-item variant="text" class="margin-top" />
          <el-skeleton-item variant="text" style="width: 50%" class="margin-top" />
        </div>
      </el-card>
    </template>
    <template #default>
      <el-card :body-style="{ padding: '0' }" shadow="never">
        <slot />
      </el-card>
    </template>
  </el-skeleton>
</template>

<script>
export default {
  name: 'SkeletonItem',
  props: {
    loadSkeletonTime: {
      type: Number,
      default: 500
    }
  },
  data() {
    return {
      loading: true
    }
  },
  created() {
    setTimeout(() => {
      this.loading = false
    }, this.loadSkeletonTime)
  }
}
</script>

<style lang="scss" scoped>
.el-card {
  border: none;
}
</style>
